<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />

    <style>
      pre {
        outline: 1px solid #ccc;
        padding: 5px;
        margin: 5px;
      }

      .string {
        color: green;
      }

      .number {
        color: darkorange;
      }

      .boolean {
        color: blue;
      }

      .null {
        color: magenta;
      }

      .key {
        color: red;
      }
    </style>

    <title>Pion ion | Echotest</title>
  </head>

  <body>
    <nav class="navbar navbar-light bg-light border-bottom">
      <h3>Pion</h3>
    </nav>
    <div class="container pt-4">
      <div class="row" id="buttons">
        <div class="col-12">
          <div class="btn-group" role="group" aria-label="...">
            <button id="connect-btn" type="button" class="btn btn-primary" onclick="connect()">
              connect
            </button>
            <button id="join-btn" type="button" class="btn btn-primary" onclick="join()" disabled=true>
              join
            </button>
            <button id="publish-btn" type="button" class="btn btn-primary" onclick="start(false)" disabled=true>
              publish
            </button>
            <button id="publish-simulcast-btn" type="button" class="btn btn-primary" onclick="start(true)" disabled=true>
              publish(simulcast)
            </button>
            <button id="leave-btn" type="button" class="btn btn-primary" onclick="leave()" disabled=true>
              leave
            </button>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-12">TURN
          <form>
            URL:
            <input type="text" id="turnUrl">
            username:
            <input type="text" id="turnUsername">
            credential:
            <input type="text" id="turnCredential">
            </form>
            </div>
            <div class="col-12">
              <form>
            Transport policy:
            <select id="select-box-relay">
              <option value="relay" selected="selected" >relay</option>
              <option value="all">all</option>
            </select>
          </form>
        </div>
      </div>

      <div class="row">
        <div class="col-12 pt-4">Media
          <select id="select-box1">
            <option value="vp8" selected="selected" >vp8</option>
            <option value="h264">h264</option>
          </select>
          <select id="select-box2">
            <option value="qvga">qvga_320_180</option>
            <option value="vga" selected="selected" >vga_640_360</option>
            <option value="shd">shd_960_540</option>
            <option value="hd">hd_1280_720</option>
            <option value="fhd">fhd_1980_1080</option>
            <option value="qhd">qhd_2560_1440</option>
          </select>
        </div>
      </div>
      <div class="row">
        <div class="col-6 pt-2">
          <span
            style="position: absolute; margin-left: 5px; margin-top: 5px"
            class="badge badge-primary"
            >Local</span
          >
          <video
            id="local-video"
            style="background-color: black"
            width="320"
            height="240"
          ></video>
          <div class="controls" style="display: none">
            <div class="row pt-3">
              <div class="col-3">
                <strong>Video</strong>
                <div class="radio">
                  <label><input
                      type="radio"
                      onclick="controlLocalVideo(this)"
                      value="true"
                      name="optlocalvideo"
                      checked
                    />Unmute</label>
                </div>

                <div class="radio">
                  <label
                    ><input
                      type="radio"
                      onclick="controlLocalVideo(this)"
                      value="false"
                      name="optlocalvideo"
                    />Mute</label>
                </div>
              </div>

              <div class="col-3">
                <strong>Audio</strong>
                <div class="radio">
                  <label
                    ><input
                      type="radio"
                      onclick="controlLocalAudio(this)"
                      value="true"
                      name="optlocalaudio"
                      checked
                    />
                    Unmute</label
                  >
                </div>
                <div class="radio">
                  <label
                    ><input
                      type="radio"
                      onclick="controlLocalAudio(this)"
                      value="false"
                      name="optlocalaudio"
                    />
                    Mute</label
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-6 pt-2">
          <span
            style="position: absolute; margin-left: 5px; margin-top: 5px"
            class="badge badge-primary"
            >Remote</span
          >
          <span
            id="size-tag"
            style="position: absolute; margin-left: 5px; top: 225px"
            class="badge badge-primary"
          ></span>
          <span
            id="br-tag"
            style="position: absolute; left: 215px; top: 225px"
            class="badge badge-primary"
          ></span>
          <span
            id="rtt-tag"
            style="position: absolute; left: 105px; top: 225px"
            class="badge badge-primary"
          ></span>
          <video
            id="remote-video"
            style="background-color: black"
            width="320"
            height="240"
          ></video>
          <div class="controls" style="display: none">
            <div class="row pt-3">
              <div class="col-3">
                <strong>Video</strong>
                <div id="simulcast-controls" style="display: none">
                  <div class="radio">
                    <label><input
                        type="radio"
                        onclick="controlRemoteVideo(this)"
                        value="high"
                        name="optremotevideos"
                        checked
                      />High</label>
                  </div>
                  <div class="radio">
                    <label><input
                        type="radio"
                        onclick="controlRemoteVideo(this)"
                        value="medium"
                        name="optremotevideos"
                      />Medium</label>
                  </div>
                  <div class="radio">
                    <label><input
                        type="radio"
                        onclick="controlRemoteVideo(this)"
                        value="low"
                        name="optremotevideos"
                      />Low</label>
                  </div>
                  <div class="radio">
                    <label><input
                        type="radio"
                        onclick="controlRemoteVideo(this)"
                        value="none"
                        name="optremotevideos"
                      />Mute</label>
                  </div>
                </div>

                <div id="simple-controls" style="display: none">
                  <div class="radio">
                    <label
                      ><input
                        type="radio"
                        onclick="controlRemoteVideo(this)"
                        value="high"
                        name="optremotevideo"
                        checked
                      />
                      Unmute</label
                    >
                  </div>
                  <div class="radio">
                    <label
                      ><input
                        type="radio"
                        onclick="controlRemoteVideo(this)"
                        value="none"
                        name="optremotevideo"
                      />
                      Mute</label
                    >
                  </div>
                </div>
              </div>
              <div class="col-3">
                <strong>Audio</strong>
                <div class="radio">
                  <label
                    ><input
                      type="radio"
                      onclick="controlRemoteAudio(this)"
                      value="true"
                      name="optremoteaudio"
                      checked
                    />
                    Unmute</label
                  >
                </div>
                <div class="radio">
                  <label
                    ><input
                      type="radio"
                      onclick="controlRemoteAudio(this)"
                      value="false"
                      name="optremoteaudio"
                    />
                    Mute</label
                  >
                </div>
              </div>
            </div>
            <strong class="d-block">API call</strong>
            <pre
              id="api"
              class="d-block border"
              style="
                background-color: #f8f9fa;
                height: 120px;
                width: 400px;
                margin: 5px 0;
              "
            ></pre>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12 pt-4">Data</div>
      </div>
      <div class="row">
        <div class="col-6 pt-2">
          <textarea
            id="local-data"
            class="d-block border"
            style="
              background-color: #f8f9fa;
              height: 200px;
              width: 400px;
              margin: 5px 0;
              padding: 5px;
            "
            placeholder="Send a message"
          ></textarea>
          <button type="button" class="btn btn-primary" onclick="sendMsg()">
            send
          </button>
        </div>
        <div class="col-6 pt-2">
          <pre
            id="remote-data"
            class="d-block border"
            style="
              background-color: #f8f9fa;
              height: 200px;
              width: 400px;
              margin: 5px 0;
            "
          ></pre>
        </div>
      </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
      integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
      crossorigin="anonymous"
    ></script>
    <script src="https://unpkg.com/ion-sdk-js@1.8.1/dist/ion-connector.min.js"></script>
    <script src="./main.js"></script>
  </body>
</html>
